<template>
  <div>
    <!-- <indexhead></indexhead> -->
    <div id="header">
      <div class="header-left" ><span><van-icon name="arrow-left" size="22px" /></span></div>
      <div class="header-input">
        <van-search 
        v-model="value"
        :value="this.value"
        background="#00bcd4"
        show-action
        placeholder="请输入商家名"
        @input="onSearch">
          <view slot="action" bind:tap="onClick">搜索</view>
        </van-search></div>
      <div class="header-right">城市<span><van-icon name="location" size="18px" /></span></div>
    </div>
    <div class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" height="170px" width="100%" type="scale-down"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="icons">
        <van-grid :border="false" :column-num="4">
        <van-grid-item >
          <van-image src="http://pic.90sjimg.com/design/00/07/85/23/59341f1855d60.png" height="58px" width="58px"/>
          <p >美食</p>
        </van-grid-item>
        <van-grid-item>
          <van-image src="http://img0.imgtn.bdimg.com/it/u=2621581840,1364511770&fm=26&gp=0.jpgg" height="58px" width="58px" />
          <p>超市便利</p>
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580567638053&di=bfef1d0c9d1ea1f6d9287f06bdd76806&imgtype=0&src=http%3A%2F%2Fimages2.10qianwan.com%2F10qianwan%2F20180402%2Fb_0_201804020209211531.jpg" height="60px" width="60px"  />
          <p>饮品</p>
        </van-grid-item>
          <van-grid-item>
          <van-image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580567521731&di=6cf1023f57c504366c6ebd93328c3e0f&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fe1175761970168774cd075680f03da135edf805659b5c-Qx3FDq_fw658" height="60px" width="60px" />
          <p>甜品</p>
        </van-grid-item>
      </van-grid>
    </div>
    <van-divider content-position="left">
      <img src="../assets/images/fire.jpg" alt="#" width="23px" height="24px" />
      本校商家</van-divider>
      <div class="shops" v-for="(item,index) in shop" :key="index" >
      <van-card slot
        :desc="item.describe"
        :title="item.m_title"
        :thumb="item.img_id"
      >
        <div slot="tags">
          <van-tag plain type="danger">提前预定</van-tag>
          <van-tag plain type="danger">按时自取</van-tag>
        </div>
        <div slot="footer">
          <router-view v-if="isRouterAlive" />
          <van-button size="mini"  @click="gotoshop(item.m_title,item.describe,item.img_id,item.m_name)" >查看</van-button>
          <van-button size="mini"  @click="addlike(item.m_title,item.img_id)" >
            <a v-if="item.likes == 1" > 已收藏</a>
            <a v-else> 收藏</a>
            </van-button>
          
        </div>
      </van-card>
      </div>
    <bar></bar>
  </div>
</template>

<script>
//import indexhead from './Header.vue'
import bar from './Footer'
import { Grid, GridItem } from 'vant';
import { Divider } from 'vant';
import { Toast } from 'vant';
import { Search } from 'vant';
export default {
  name:'',
  data(){
    return{
      images: [
        'https://zmshop555.oss-cn-beijing.aliyuncs.com/image/%25BA3YQI%7B3%5BQ9G92R%60W%7EXE6N.png',
        'https://zmshop555.oss-cn-beijing.aliyuncs.com/image/3GY%24U%25%25U1KQ1K%2801G9%602%24%60X.png',
        'https://zmshop555.oss-cn-beijing.aliyuncs.com/image/C5CE5DDFF00864373AE0CDDCD0BDAB62.jpg',
      ],
      isRouterAlive:true,
      reload:this.reload,
      shop:[],
      picture:[],
      img:'',
      m_id:'',
      m_name:'',
      value:'',
      vif:'',
      likes:[],
    }
  },
  components:{
  //   indexhead,
     bar
  },
  inject:["reload"],
  mounted() {
    this.ajax
    this.axios.get('http://www.shop.com:8080/api.php/common/getMerchantsList?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6')
    .then(res=>{
      this.shop=res.data.data.merchants.data
      if(sessionStorage.getItem('username')){
        let username= sessionStorage.getItem('username');
        this.axios.get("http://www.shop.com:8080/api.php/common/getlikeslist?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&u_name=" +
            username).then(res=>{
              this.likes=res.data.data.likes[0]
              for(var i=0;i<this.shop.length;i++){
                for(var j=0;j<this.likes.length;j++){
                  if(this.shop[i].m_title==this.likes[j].m_title){
                    this.shop[i].likes = '1'
                  }
                }
              }
          })
        }
      this.axios.get('http://www.shop.com:8080/api.php/common/getPictureList?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6')
      .then(res=>{
        this.picture=res.data.data
        for(var i=0;i<this.shop.length;i++){
          for(var j=0 ;j<this.picture.length;j++){
            if(this.shop[i].img_id==this.picture[j].id){
              this.shop[i].img_id="http://www.shop.com:8080/upload/picture/"+this.picture[j].path
            }
          }
        }
      })
    })
  },
 methods: {
    gotoshop(m_title,describe,img_id,m_name){
      sessionStorage.setItem("img_id",img_id); 
      for(var j=0 ;j<this.picture.length;j++){
        let url="http://www.shop.com:8080/upload/picture/"+this.picture[j].path;
        if(img_id==url){
          this.img=this.picture[j].id
        }
      }
      this.img_id=this.img;
      this.$router.push({path:'/ShopDetail',query:{m_title:m_title,m_name:m_name,describe:describe,img_id:this.img_id}});
    },
    
    onSearch(val) {
      this.axios.get('http://www.shop.com:8080/api.php/common/getMerchantsListLike?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&m_title='+val)
    .then(res=>{
      this.shop=res.data
      this.axios.get('http://www.shop.com:8080/api.php/common/getPictureList?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6')
    .then(res=>{
      this.picture=res.data.data
      for(var i=0;i<this.shop.length;i++){
        for(var j=0 ;j<this.picture.length;j++){
          if(this.shop[i].img_id==this.picture[j].id){
            this.shop[i].img_id="http://www.shop.com:8080/upload/picture/"+this.picture[j].path
          }
        }
      }
      })
    })
    },

  //收藏
    addlike(m_title,img_id){
      this.m_title=m_title;
      this.img_id=img_id;
      for(var j=0 ;j<this.picture.length;j++){
        let url="http://www.shop.com:8080/upload/picture/"+this.picture[j].path;
        if(this.img_id==url){
          this.img=this.picture[j].id
        }
      }
      this.m_id=this.img;
      let username= sessionStorage.getItem('username');
      if(!username){
        var that=this;
        Toast({
        message:'请先登录',
        duration:1000,
          onClose:function(){
            that.$router.push('/login');
          }
        });
      }else{
        let a=true
        for(var j=0;j<this.likes.length;j++){
          if(this.m_title==this.likes[j].m_title){
            a=false
          }
        }
        if(a){
          this.axios.post('http://www.shop.com:8080/api.php/common/getLikesAdd?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&u_name='
          +username+'&&m_title='+this.m_title+'&&img_id='+this.m_id)
          .then(res=>{
            Toast({
              message:res.data.msg,
              duration:1000,
            });
            this.$nextTick(()=>this.isRouterAlive=true)
            this.isRouterAlive=false
          })
          this.reload()
        }else{
          this.axios.post('http://www.shop.com:8080/api.php/Common/getLikesDel?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&u_name='+username+'&&m_title='+this.m_title)
          .then(res=>{
            Toast({
              message: '取消成功',
              icon: 'success'
            });
            this.$nextTick(()=>this.isRouterAlive=true)
            this.isRouterAlive=false
          })
          this.reload()
        }
      }
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.icons{
  margin-top: 200px;
}
p{
  font-family: "华文新魏";
  size: 5px;
}
.van-divider{
  font-family: "华文新魏";
  size:25px;

}
#header{
   position: relative;
  display:flex;
  line-height:43px;
  background-color:#00bcd4;
  color:#fff;


} 
.header-left span {
 float:left;
 text-align:center;
 margin-top:6px;


}
.header-input{
  flex:1;
  margin-top:-3px;
  margin-left:11px;
  height:31px;
  line-height:31px;
  background-color:#fff;
  border-radius:5px;
  color:#ccc;



}
.header-right{
  width:80px;
  float:right;
  text-align:center;
}
.banner {
position: absolute;
margin: auto;
max-height: 600px;
right: 0;
left: 0;
border-radius: 8px;
overflow: hidden;
}
</style>
